<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="form-group">
            <label>请选择文件</label><br>
            <input type="file" id="file">
            <div class="padding" id="box">

            </div>
            <div class="progress">
                <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
                <!-- 进度条 -->
            </div>
        </div>
    </div>
    <script>
        var file = document.getElementById('file');
        var bar = document.getElementById('bar');
        var box = document.getElementById('box');
        file.onchange = function(){
            // 创建空的dormData表单对象
            var formData = new FormData();
            // 将用户选择的文件加到attrName标单对象中
            formData.append('attrName',this.files[0]);
            // 创建Ajax对象
            var xhr = new XMLHttpRequest();
            // 对Ajax对象进行配置
            xhr.open('post','http://localhost:3000/upload');
            // 在上传文件的过程中持续触发
            xhr.upload.onprogress = function(ev){
                // ev.loaded 文件上传了多少
                // ev.total 上传文件的总大小
               var result = (ev.loaded / ev.total) * 100 + '%';
            //    设置进度条的宽度
               bar.style.width = result;
            //    将百分比显示在进度条中
               bar.innerHTML = result;
            }
            xhr.send(formData);
            // 发送Ajax请求
            xhr.onload = function(){
                // 监听服务器响应给客户端的数据
                if(xhr.status == 200){
                    // 将服务器端返回的数据显示在控制台中
                    var result = (JSON.parse(xhr.responseText));
                    // 动态创建img标签
                    var img = document.createElement('img')
                    // 给图片设置src属性
                    img.src = result.path;
                    img.onload = function(){
                        // 将图片显示在页面中
                        box.appendChild(img);
                    }
                }
            }
        }
    </script>
</body>
</html>l